<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" />
<title>报修</title>
<link href="/SmartCommunity/css/wechat/main.css" rel="stylesheet" />
<link href="/SmartCommunity/css/wechat/weui.css" rel="stylesheet" />
</head>
<body>
<div class="SpecialTop">
					<a class="back" href="javascript:history.back();"></a>
					<div class="renzheng">报修描述</div>
					 <a href="javascript:checkRepair();" class="Tlogin weui_btn weui_btn_mini weui_btn_primary ">提交</a>
</div>
<div class="weui_cells weui_cells_form">
<div class="weui_cell">
                <div class="weui_cell_hd"><label class="weui_label">标题</label></div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input class="weui_input" id="repair_title" type="text" placeholder="请输入标题"/>
                </div>
            </div>
            <div class="weui_cells_title">报修详情</div>
            <a><img class="baoxiu-camera" id="chooseImage" src="/SmartCommunity/images/wechat/camera.png" /></a> 
			<a><img class="baoxiu-camera" src="/SmartCommunity/images/wechat/microphone.png" id="mic_btn" /></a>
           <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <textarea class="weui_textarea" id="con_bx" placeholder="请输入详情" rows="3"></textarea>
                    <div class="weui_textarea_counter"><span>0</span>/200</div>
                </div>
            </div> 
  </div>
  <div style="display: none;" class="add_img">
  <img class="img_we_add" src="/SmartCommunity/images/wechat/add2.png">
  </div>
  <div class="repair_yuyin" style="display: none;" >
  <div class="voice_dynamic">
		<img src="/SmartCommunity/images/wechat/voice.png" class="yuyin_img" />
	</div>
		<img class="voice_detete" src="/SmartCommunity/images/wechat/delete.png" />
  </div>
 	<div class="record_bottom" style="visibility: hidden;">
		<div class="ball-scale-multiple" style="visibility: hidden;">
			<div></div>
		</div>
		<img src="/SmartCommunity/images/wechat/mic.png" class="mic" /> <img
			src="/SmartCommunity/images/wechat/close.png" class="close_mic" />
	</div>

<div class="weui_dialog_confirm" id="dialog1" style="display: none;">
        <div class="weui_mask"></div>
        <div class="weui_dialog">
            <div class="weui_dialog_hd"><strong class="weui_dialog_title">确定要删除之前的录音吗</strong></div>
            <div class="weui_dialog_ft">
                <a href="javascript:;" class="weui_btn_dialog default delete_cancle">取消</a>
                <a href="javascript:;" class="weui_btn_dialog primary delete_sure">确定</a>
            </div>
        </div>
    </div>
    <div id="loadingToast" class="weui_loading_toast" style="display:none;">
        <div class="weui_mask_transparent"></div>
        <div class="weui_toast">
            <div class="weui_loading">
                <div class="weui_loading_leaf weui_loading_leaf_0"></div>
                <div class="weui_loading_leaf weui_loading_leaf_1"></div>
                <div class="weui_loading_leaf weui_loading_leaf_2"></div>
                <div class="weui_loading_leaf weui_loading_leaf_3"></div>
                <div class="weui_loading_leaf weui_loading_leaf_4"></div>
                <div class="weui_loading_leaf weui_loading_leaf_5"></div>
                <div class="weui_loading_leaf weui_loading_leaf_6"></div>
                <div class="weui_loading_leaf weui_loading_leaf_7"></div>
                <div class="weui_loading_leaf weui_loading_leaf_8"></div>
                <div class="weui_loading_leaf weui_loading_leaf_9"></div>
                <div class="weui_loading_leaf weui_loading_leaf_10"></div>
                <div class="weui_loading_leaf weui_loading_leaf_11"></div>
            </div>
            <p class="weui_toast_content">数据加载中</p>
        </div>
    </div>
     <div class="weui_toptips weui_warn js_tooltips" id="js_tooltips_title">标题不能为空</div>
      <div class="weui_toptips weui_warn js_tooltips" id="js_tooltips_content">报修详情不能为空</div>
	<script src="/SmartCommunity/js/wechat/jquery-2.2.0.min.js"></script>
	<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
	<script>
		var arr_G;
		$.ajax({
			type : "POST",
			url : "/SmartCommunity/views/wechat/get_js_args",
			async : false,
			//contentType : "application/json; charset=utf-8",
			data : {
				url : "/SmartCommunity/views/wechat/repair.html"
			},
			success : function(data) {
				arr_G = eval("(" + data + ")");
			},
			error : function(error) {
				alert("网络请求失败");
			}
		});
		wx.config({
			debug : false,
			appId : arr_G.appId,
			timestamp : arr_G.timestamp,
			nonceStr : arr_G.nonceStr,
			signature : arr_G.signature,
			jsApiList : [ 'startRecord', 'stopRecord', 'onVoiceRecordEnd',
					'playVoice', 'onVoicePlayEnd', 'pauseVoice', 'stopVoice',
					'uploadVoice', 'chooseImage', 'previewImage',
					'uploadImage', ]
		});
		var images = {
			localId : [],
			serverId : []
		};
		var voice = {
			localId : '',
			serverId : ''
		};
		var flag = true;
		var flag_play = true;
		wx.ready(function() {
			wx.onVoicePlayEnd({
				complete : function(res) {
					$(".yuyin_img").attr("src",
							"/SmartCommunity/images/wechat/voice.png");
					flag_play = true;
				}

			});
			wx.onVoiceRecordEnd({
				complete : function(res) {
					voice.localId = res.localId;
					alert('录音时间已超过一分钟');
					$(".repair_yuyin").css("display", "list-item");
					$(".ball-scale-multiple").css("visibility", "hidden");
					flag = true;
				}

			});
		});
		document.querySelector('#chooseImage').onclick = function() {
			images.localId = '';
			$(".add_img").css("display", "none");
			$(".img_we").remove();
			wx
					.chooseImage({
						success : function(res) {
							images.localId = res.localIds;
							$(".add_img").css("display", "block");
							if (images.localId.length > 3) {
								alert("图片最多添加三张");
								$(".img_we_add").css("display", "none");
								images.localId.slice(0, 3);
								for (var i = 0; i < 3; i++) {
									$(".img_we_add")
											.before(
													"<img class=\'img_we\' id=\'"+i+"\'src=\'"+res.localIds[i]+"\'/>");
								}
							} else if (images.localId.length == 3) {
								$(".img_we_add").css("display", "none");
								for (var i = 0; i < 3; i++) {
									$(".img_we_add")
											.before(
													"<img class=\'img_we\' id=\'"+i+"\'src=\'"+res.localIds[i]+"\'/>");
								}
							} else {
								for (var i = 0; i < res.localIds.length; i++) {
									$(".img_we_add")
											.before(
													"<img class=\'img_we\' id=\'"+i+"\'src=\'"+res.localIds[i]+"\'/>");
								}
							}
						}
					});
		};
		function checkRepair() {
			var baoxiu_tittle = $("#repair_title").val();
			var con_bx = $("#con_bx").val();
			if (baoxiu_tittle == "") {
				var $temp=$("#js_tooltips_title");
				$temp.show();
		        setTimeout(function () {
		            $temp.hide();
		        }, 2000);
				$("#repair_title").focus();
				return false;
			}
			if (con_bx == "") {
				var $temp=$("#js_tooltips_content");
				$temp.show();
		        setTimeout(function () {
		            $temp.hide();
		        }, 2000);
				$("#con_bx").focus();
				return false;
			}
			$('#loadingToast').show();
			if (voice.localId != '') {
				wx.uploadVoice({
					localId : voice.localId,
					isShowProgressTips: 0,
					success : function(res) {
						voice.serverId = res.serverId;
						if (images.localId.length != 0) {
							var i = 0, length = images.localId.length;
							if(length>3)length=3;
							images.serverId = [];
							function upload() {
								wx.uploadImage({
									localId : images.localId[i],
									isShowProgressTips: 0,
									success : function(res) {
										i++;
										images.serverId.push(res.serverId);
										if (i < length) {
											upload();
										}
										if(i==length){
											data = {
													title : baoxiu_tittle,
													content : con_bx,
													image : images.serverId,
													voice : voice.serverId
												};
											ajax_data(data);
										}
										
									},
									fail : function(res) {
										alert("图片上传失败");
									}
								});
							}
							upload();
							
						} else {
							data = {
								title : baoxiu_tittle,
								content : con_bx,
								voice : voice.serverId
							};
							ajax_data(data);

						}

					}
				});
			} else {
				if (images.localId.length != 0) {
					var i = 0, length = images.localId.length;
					if(length>3)length=3;
					images.serverId = [];
					function upload() {
						wx.uploadImage({
							localId : images.localId[i],
							isShowProgressTips: 0,
							success : function(res) {
								i++;
								images.serverId.push(res.serverId);
								if (i < length) {
									upload();
								}
								if(i==length){
								data = {
									title : baoxiu_tittle,
									content : con_bx,
									image : images.serverId
								};
								ajax_data(data);
								}
							},
							fail : function(res) {
								alert("图片上传失败");
							}
						});
					}
					upload();
				} else {
					data = {
						title : baoxiu_tittle,
						content : con_bx
					};
					ajax_data(data);
				}
			}
			return false;
		}
		function ajax_data(data1) {
			$.ajax({
				type : "POST",
				url : "/SmartCommunity/wechat/sumit_repair_request",
				//contentType : "application/json; charset=utf-8",
				data : data1,
				//dataType : "json",
				success : function(data) {
					if (data == "true") {
						$('#loadingToast').hide();
						$(".repair_yuyin").css("display", "none");
						voice.localId = '';
						images.localId = '';
						$(".add_img").css("display", "none");
						$("#repair_title").val("");
						$("#con_bx").val("");
						alert("发送消息成功");
					} else {
						$('#loadingToast').hide();
						alert("发送消息失败");
					}

				},
				error : function(error) {
					$('#loadingToast').hide();
					alert("网络请求失败");
				}
			});
		}
		$("#mic_btn").click(function() {
			$(".record_bottom").css("visibility", "visible");
			$(".ball-scale-multiple").css("visibility", "hidden");
			voice.localId = '';
		});

		$('.delete_cancle').click(function() {
			var $dialog = $('#dialog1');
			$dialog.hide();
		});

		$('.delete_sure').click(function() {
			var $dialog = $('#dialog1');
			$dialog.hide();
			$(".repair_yuyin").css("display", "none");
			voice.localId = '';
			$(".ball-scale-multiple").css("visibility", "visible");
			flag = false;
			wx.startRecord({
				cancel : function() {
					alert('用户拒绝授权录音');
				}
			});
		});

		$(".mic").on("click", function() {
			if (flag) {
				if ($(".repair_yuyin").css("display") == "list-item") {
					var $dialog = $('#dialog1');
					$dialog.show();

				} else {
					$(".ball-scale-multiple").css("visibility", "visible");
					flag = false;
					wx.startRecord({
						cancel : function() {
							alert('用户拒绝授权录音');
						}
					});
				}
			} else {
				$(".ball-scale-multiple").css("visibility", "hidden");
				flag = true;
				wx.stopRecord({
					success : function(res) {
						voice.localId = res.localId;
					},
					fail : function(res) {
						alert("录音失败");
					}
				});
				$(".repair_yuyin").css("display", "list-item");
			}
		});

		$(".voice_detete").click(function() {
			voice.localId = '';
			$(".repair_yuyin").css("display", "none");

		});
		$(".close_mic").click(function() {
			$(".record_bottom").css("visibility", "hidden");
			$(".ball-scale-multiple").css("visibility", "hidden");
			voice.localId = '';
			flag = true;
		});

		$(".voice_dynamic").click(
				function() {
					if (flag_play) {
						$(".yuyin_img").attr("src",
								"/SmartCommunity/images/wechat/dynamic_voice.gif");
						wx.playVoice({
							localId : voice.localId
						});
						flag_play = false;
					} else {
						$(".yuyin_img").attr("src",
								"/SmartCommunity/images/wechat/voice.png");
						wx.stopVoice({
							localId : voice.localId
						});
						flag_play = true;
					}

				});
		$(".img_we_add")
				.click(
						function() {
							wx
									.chooseImage({
										success : function(res) {
											var length_init = images.localId.length;
											var temp = 3 - length_init;
											images.localId = images.localId
													.concat(res.localIds);
											if (images.localId.length > 3) {
												alert("图片最多添加三张");
												$(".img_we_add").css("display",
														"none");
												images.localId.slice(0, 3);
												for (var i = 0; i < temp; i++) {
													var j = i + length_init;
													$(".img_we_add")
															.before(
																	"<img class=\'img_we\' id=\'"+j+"\'src=\'"+res.localIds[i]+"\'/>");
												}
											} else if (images.localId.length == 3) {
												$(".img_we_add").css("display",
														"none");
												for (var i = 0; i < temp; i++) {
													var j = i + length_init;
													$(".img_we_add")
															.before(
																	"<img class=\'img_we\' id=\'"+j+"\'src=\'"+res.localIds[i]+"\'/>");
												}
											} else {
												for (var i = 0; i < res.localIds.length; i++) {
													var j = i + length_init;
													$(".img_we_add")
															.before(
																	"<img class=\'img_we\' id=\'"+j+"\'src=\'"+res.localIds[i]+"\'/>");
												}
											}
										}
									});
						});
	</script>
</body>
</html>